<template>
    <div style='height:100%;'>
		<div style='display: flex;align-items: center'>
            <div class='chart' ref='containerRef'>
                <v-chart v-if='value' autoresize :option='options'></v-chart>
                <XLoading v-else></XLoading>
            </div>
            <div class='info'>
                <table class='table'>
                    <template v-for='(v, i) in infoList' :key='i'>
                        <tr>
                            <td class='name'>
                                <XColorBlockText type='square' :color='v.color'>
                                    <span class='m-l-15'>{{v.name}}</span>
                                </XColorBlockText>
                            </td>
                            <td class='rate'>{{v.rate}}%</td>
                            <td class='f-14'>{{v.value}}<span class='f-12'>笔</span></td>
                        </tr>
                    </template>
                </table>
            </div>
        </div>
	</div>
</template>

<script lang='ts'>
    import { use } from "echarts/core";
    import { PieChart } from 'echarts/charts'
    use([PieChart])

    import { defineComponent, reactive, ref, toRef, computed } from "vue";

    interface Props {
		modelValue : any[] | null;
	}

    export default defineComponent({
        props : {
			modelValue : {
				type : [Array, Object],
				default : function() {
					return null
				}
			}
		},

        setup(props:Props) {
            var colorList = [
                ['#564aff', '#7233ff'],
                ['#96d110', '#55cc1a'],
                ['#1b8fff', '#1dc7ff'],
                ['#ef495f', '#f5664c']
            ]
            let containerRef = ref<{[key:string]:any}>({})
			const value = toRef(props, 'modelValue')
            let infoList = reactive([])

            let options = computed(() => {
                infoList.splice(0)

                var W = containerRef.value.clientHeight * 1 / 2

                var radius = W * 0.9
                var minAngle = 5
                var minRate = minAngle / 360
                var data = JSON.parse(JSON.stringify(props.modelValue))

                data.sort(function(a, b) {
                    return b.value - a.value
                })

				let total = 0
				var sum = 0
				data.forEach((v, i) => {
					total += v.value
                    sum += v.value
                    
                    if(i == 0) {
                        v.radius = radius
                    }else {
                        if(v.value < data[i - 1].value) {
                            radius -= 5
                        }

                        v.radius = radius
                    }
				})

				var incrValue = 0
				var minValue = sum * minRate
				
	
				data.forEach((v, i) => {
                    infoList.push({
                        name : v.name,
                        value : v.value,
                        rate : v.rate,
                        color : colorList[i][0]
                    })


					v.v = v.value
					if(v.value < minValue) {
						incrValue += (minValue - v.value)
						v.value = minValue
					}
				})

				if(incrValue >= 1) {
					while(true) {
						for(let i = 0; i < data.length; i ++) {
							var item = data[i]
							if(item.value >= (minValue + 1)) {
								item.value --
								incrValue --
							}
						}
						if(incrValue < 1) {
							break
						}
					}
                }
                
                
                
				sum = 0
				data.forEach(v => {
                    sum += v.value
                })
                

				var startAngle = 360
				var series = []

				var offset = 0 / 360 * sum
				
				
				data.forEach((item, index) => {
                    var color = {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: colorList[index][0] // 0% 处的颜色
                            }, {
                                offset: 1, color: colorList[index][1] // 100% 处的颜色
                            }]
                        }
					var v = item.value
					var serie = {
						type : 'pie',
						startAngle : startAngle,
						silent : true,
						center : ['50%', '50%'],
						radius : ['45%', item.radius],
                        label : {
                            show : false
                        },
						data   : [
							{name : item.name, value : v - offset, v : item.v, label : {color : '#fff', align : 'center', rich : {name : {color : '#a9abaf'}, margin : {height : 4, width : '100%'},hr : {height : 1, width : '100%', backgroundColor : '#5c6270'}}}, itemStyle : {color : color}},
							{name : item.name, value : sum - v, v : v, itemStyle : {color : 'transparent'}, label : {show : false}, labelLine : {show : false}}
						]
					}
					series.push(serie)
					startAngle -= (v / sum * 360)
				})
				
				var options =  {
                    textStyle : {
                        fontFamily : 'sans-serif 微软雅黑'
                    },
					grid : {
						top : '0px',
						right : '0px',
						bottom : '0px',
						left : '0px'
					},

					series: series
				}

				return options
            })

            return {
				containerRef,
				options,
				value,
                infoList
			}
        }
    })

</script>

<style scoped lang='scss'>
    .chart{
        width: 230px;
        height: 180px;
    }

    .info{
        margin-left: 30px;
    }

    .table{
        border-collapse: separate;
        border-spacing: 15px;

        td{
            white-space: nowrap;
            text-align: left;
            vertical-align: middle;
            font-size: 18px;

            &.name{
                width: 120px;
                //color: #a4a6a8;
                font-size: 16px;
            }

            &.rate{
                width: 80px;
                font-size: 14px;
            }
        }
    }
</style>